import XEUtils from 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
import VXETablePluginElement from 'vxe-table-plugin-element'
import util from '@/libs/util'
export default {
  install (Vue, options) {
    Vue.use(VXETable)

    VXETable.setup({
      size: 'mini',
      tooltipConfig: {
        zIndex: 3000
      }
    })

    Vue.prototype.$XModal = VXETable.modal
    Vue.prototype.$XPrint = VXETable.print
    Vue.prototype.$XSaveFile = VXETable.saveFile
    Vue.prototype.$XReadFile = VXETable.readFile

    VXETable.use(VXETablePluginElement)

    var emptyCell = '/'

    VXETable.formats.add('formatEmpty', ({ cellValue }) => {
      if (XEUtils.isNull(cellValue) || XEUtils.isNaN(cellValue) || XEUtils.isUndefined(cellValue) || cellValue === '') {
        return emptyCell
      }
      return cellValue
    })

    VXETable.formats.add('formatSize', ({ cellValue }) => {
      return util.converSize(cellValue)
    })

    VXETable.formats.add('formatDate', ({ cellValue }) => {
      if (!XEUtils.isNumber(cellValue)) return emptyCell
      return XEUtils.toDateString(cellValue * 1000, 'yyyy-MM-dd HH:mm:ss')
    })

    VXETable.formats.add('formatDateNotMinute', ({ cellValue }) => {
      if (!XEUtils.isNumber(cellValue)) return emptyCell
      return XEUtils.toDateString(cellValue * 1000, 'yyyy-MM-dd')
    })

    VXETable.formats.add('formatWhether', ({ cellValue }) => {
      if (cellValue === '1' || cellValue === 1) {
        return '是'
      } else if (cellValue === '0' || cellValue === 0) {
        return '否'
      } else {
        return '无效'
      }
    })

    VXETable.renderer.add('dict', {
      // 默认显示模板
      renderDefault (h, renderOpts, params) {
        let { row, column } = params
        let { events, dictName, customDict, options, all, labelKey, valueKey } = renderOpts
        var val = row[column.property]
        if (val === null || val === '') {
          return [
            <span>{emptyCell}</span>
          ]
        } else {
          return [
            <yc-dict v-model={row[column.property]} onClick={() => events.click(params)}
              valueKey={valueKey} labelKey={labelKey} dictName={dictName} customDict={customDict} options={options} all={all}></yc-dict>
          ]
        }
      }
    })

    VXETable.renderer.add('dict-select', {
      renderEdit (h, renderOpts, params) {
        let { row, column } = params
        let { events, dictName, customDict, options, disabled, all } = renderOpts
        return [
          <yc-dict-select v-model={row[column.property]} onChange={() => events.change(params)}
            dictName={dictName} customDict={customDict} options={options} disabled={disabled} all={all}></yc-dict-select>
        ]
      }
    })

    VXETable.renderer.add('date-picker', {
      renderEdit (h, renderOpts, params) {
        let { row, column } = params
        let { events, disabled } = renderOpts
        return [
          <div class="block">
            <el-date-picker
              disabled={disabled}
              size="mini"
              v-model={row[column.property]}
              onChange={() => events.change(params)}
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        ]
      }
    })

    VXETable.renderer.add('pictrue', {
      renderDefault (h, renderOpts, params) {
        let { row, column } = params
        let { events, domain, fit = 'contain', width = 'auto' } = renderOpts
        var style = `width:${width}`
        var val = row[column.property]
        var src = domain === '' || domain === undefined ? val : domain + val
        if (val === null || val === '') {
          return [
            <el-image style={style} fit={fit} src="/image/default/avatar.jpg" />
          ]
        } else {
          return [
            <el-image
              style={style}
              src={src}
              fit={fit}
              preview-src-list={[src]}>
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          ]
        }
      }
    })

    VXETable.renderer.add('url', {
      renderDefault (h, renderOpts, params) {
        let { row, column } = params
        let { events, domain } = renderOpts
        var label = row[column.property]
        if (label) {
          label = label.substring(label.lastIndexOf('/') + 1)
          return [
            <el-link type="primary" href={domain + row[column.property]} target="_blank" >{label}</el-link>
          ]
        } else {
          label = emptyCell
          return [
            <span>{label}</span>
          ]
        }
      }
    })

    VXETable.renderer.add('openFile', {
      renderDefault (h, renderOpts, params) {
        let { row, column } = params
        let { events, domain } = renderOpts
        var label = row[column.property]
        if (label) {
          let doms = []
          var labels = label.split(',')
          labels.forEach(e => {
            var _label = ''
            _label = e.substring(e.lastIndexOf('/') + 1)
            _label = _label.substring(_label.indexOf('-') + 1)
            var dom = <el-link style="display:block;" type="primary" href={domain + e} target="_blank" >{_label}</el-link>
            doms.push(dom)
          })
          return doms
        } else {
          label = emptyCell
          return [
            <span>{label}</span>
          ]
        }
      }
    })

    VXETable.renderer.add('button', {
      renderDefault (h, renderOpts, params) {
        let { row, column } = params
        let { events, label, type = 'primary' } = renderOpts
        return [
          <el-button size="mini" type={type} class="is-thin" onClick={() => events.click(params)}>
            {label}
          </el-button>
        ]
      }
    })

    VXETable.renderer.add('cascader', {
      renderDefault (h, renderOpts, params) {
        let { row, column } = params
        let { events, options = [], optionProps = { value: 'value', label: 'label', children: 'children' } } = renderOpts
        let label = ''
        var source = util.flattenData(options)
        var str = row[column.property]
        if (str) {
          let newArr = []
          var arr = str.split(',')
          arr.forEach(e => {
            var temp = source.find(item => item.id.toString() === e.toString())
            if (temp) {
              newArr.push(temp[optionProps.label])
            }
          })
          label = newArr.join('/')
        } else {
          label = emptyCell
        }

        return [
          <span>{label}</span>
        ]
      }
    })

    VXETable.renderer.add('rate', {
      renderDefault (h, renderOpts, params) {
        let { row, column } = params
        let { events } = renderOpts
        var val = row[column.property]
        if (val === null || val === '') {
          val = 0
        } return [
          <el-rate
            v-model={val}
            disabled>
          </el-rate>
        ]
      }
    })
  }
}
